<template>
  <div id="details">
    <Header title="订单详情" />
    <div class="container">
      <div class="module">
        <div class="module-title">
          <span class="title-icon"></span>
          <span class="tittle-text">基本信息</span>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-title">
          订单号:
          <span>{{apply.yong_che_no}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>用车单位</span>
          <span>{{apply.apply_dept_name}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>用车人:{{apply.yong_che_ren}}</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">{{apply.apply_use_phone}}</span>
            <span class="color-blue">{{apply.apply_duanhao}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>联系人:{{apply.sui_xing_name}}</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">{{apply.sui_xing_phone}}</span>
            <span class="color-blue">{{apply.sui_xing_call}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span>用车类型:</span>
            <span>{{apply.apply_sx_pople}}</span>
            <!-- <span class="car-left50">中型客车<span>1</span>辆</span><span>{{apply.car_type_name}}</span>辆 -->
          </div>
          <div class="car-users">
            <span>乘车人数:</span>
            <span>{{apply.apply_man_num}}人</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span class="start-img"></span>
            <span class="car-left14">{{apply.apply_use_address}}</span>
          </div>
          <div class="car-users">
            <span class="car-right25">{{apply.apply_use_time}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span class="end-img"></span>
            <span class="car-left14">{{apply.apply_destination}}</span>
          </div>
          <div class="car-users">
            <span class="car-right25">{{apply.apply_back_time}}</span>
          </div>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="send-car"></span>
          <span class="tittle-text">派车信息</span>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span>车牌号:</span>
            <span>{{apply.apply_car_num}}</span>
            <!-- <span class="color-green">(5座)</span> -->
          </div>
          <span>{{apply.car_type_name}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>驾驶员:{{apply.driver_name}}</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">{{apply.driver_phone}}</span>
            <span class="color-blue">{{apply.driver_duanhao}}</span>
          </div>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="cost-car"></span>
          <span class="tittle-text">相关费用</span>
        </div>
        <!-- <div class="car-users">
          <span class="car-reduce"></span>
          <span class="car-num">2</span>
          <span class="car-plus"></span>
        </div>-->
      </div>

      <div class="content-box">
        <div class="cb-item cb-item-row">
          <span>实际出发时间</span>
          <div class="car-users">
            <span class="car-right25">{{apply.real_use_time}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>实际归队时间</span>
          <div class="car-users">
            <span class="car-right25">{{apply.real_back_time}}</span>
          </div>
        </div>
      </div>
      <div class="add-buttons">
        <div @click="addFront">向前添加一天</div>
        <div @click="addAfter">向后添加一天</div>
      </div>
      <div class="content-box" v-for="(item, index) in details" :key="index">
        <div class="cb-item cb-item-row">
          <span class="car-message">{{item.js_time}}信息</span>
          <span v-if="details.length>1" @click="deteleAction(index)" class="car-delete"></span>
        </div>
        <div class="cb-item cb-item-row">
          <span>用车时间</span>
          <span
            class="car-num-button"
            @click="selectDate(index)"
          >{{item.js_start_hour?item.js_start_hour:"请选择时间"}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>起止地址</span>
          <input v-model="item.js_address" placeholder="请填写起止地址" class="car-num-text car-num-fee" />
        </div>
        <div class="cb-item cb-item-row">
          <span>长途公里</span>
          <div>
            <input v-model="item.js_km" placeholder="请填写长途公里" class="car-num-fee" />
            <span>km</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>室内天数</span>
          <div>
            <input v-model="item.js_days" placeholder="请填写室内天数" class="car-num-fee" />
            <span>天</span>
          </div>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="other-car"></span>
          <span class="tittle-text">其他费用</span>
        </div>
      </div>
      <div class="content-box">
        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_ykj==1">
          <span>一口价</span>
          <div>
            <input v-model="price.bill_ykj" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_km==1">
          <span>额外里程费</span>
          <div>
            <input v-model="price.bill_km" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>
        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_day==1">
          <span>租车费</span>
          <div>
            <input v-model="price.bill_day" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_park==1">
          <span>停车费</span>
          <div>
            <input v-model="price.bill_park" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_wait==1">
          <span>等候费</span>
          <div>
            <input v-model="price.bill_wait" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_stay==1">
          <span>住宿费</span>
          <div>
            <input v-model="price.bill_stay" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_road==1">
          <span>过路费</span>
          <div>
            <input v-model="price.bill_road" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_start==1">
          <span>起步价</span>
          <div>
            <input v-model="price.bill_road" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_quyu==1">
          <span>区域补贴</span>
          <div>
            <input v-model="price.bill_quyu" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_night==1">
          <span>夜间补贴</span>
          <div>
            <input v-model="price.bill_night" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_weekend==1">
          <span>节假日补贴</span>
          <div>
            <input v-model="price.bill_weekend" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_jb==1">
          <span>加班费</span>
          <div>
            <input v-model="price.bill_jb" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>

        <div class="cb-item cb-item-row" v-if="conf.rejoin_bill_other==1">
          <span>其他费用</span>
          <div>
            <input v-model="price.bill_other" class="hotel car-num-fee" />
            <span class="fee">元</span>
          </div>
        </div>
      </div>
    </div>

    <div class="buttom">
      <van-button @click="postData" type="primary" size="large" color="#3A73F6">提交</van-button>
    </div>

    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker
        type="time"
        value="currentDate"
        @confirm="datePickerConfirm"
        @cancel="datePickerConfirm=false"
      />
    </van-popup>
  </div>
</template>

<script>
import Header from "../../components/Header";
import { dateFormat } from "../../util/date";
import { Toast } from "vant";

export default {
  name: "Details",
  data() {
    return {
      show: false,
      reason: "",
      apply: {},
      details: [],
      conf: {},
      showDatePicker: false,
      selectIndex: 0,
      currentDate: "",
      price: {
        bill_ykj: "",
        bill_km: "",
        bill_day: "",
        bill_park: "",
        bill_wait: "",
        bill_stay: "",
        bill_road: "",
        bill_start: "",
        bill_quyu: "",
        bill_night: "",
        bill_weekend: "",
        apply_jb_subsidy: "",
        other: ""
      }
    };
  },
  mounted() {
    this.getData();
  },

  methods: {
    //提交数据
    postData() {
      this.$http
        .get("/orderRejoin/initDataForAppRejoin", {
          real_use_time: this.apply.real_use_time,
          real_back_time: this.apply.real_use_time,
          apply_start_lm: "0",
          apply_end_lm: "0",
          details: this.details,
          bill_ykj: this.price.bill_ykj,
          bill_km: this.price.bill_km,
          bill_day: this.price.bill_day,
          bill_park: this.price.bill_park,
          bill_wait: this.price.bill_wait,
          bill_stay: this.price.bill_stay,
          bill_road: this.price.bill_road,
          bill_start: this.price.bill_start,
          bill_quyu: this.price.bill_quyu,
          bill_night: this.price.bill_night,
          bill_weekend: this.price.bill_weekend,
          apply_jb_subsidy: this.price.apply_jb_subsidy,
          other: this.price.other,
          applyId: this.$route.query.id,
          rejoin_name:this.$store.state.user.loginName
        })
        .then(result => {
          console.log(result);
          Toast(result.message);
          this.$router.go(-1);
        });
    },
    datePickerConfirm(e) {
      let arr = this.details;
      arr[this.selectIndex]["js_start_hour"] = e;
      this.showDatePicker = false;
    },
    //选择时间
    selectDate(index) {
      this.currentDate = this.details[this.selectIndex]["js_start_hour"];
      this.selectIndex = index;
      this.showDatePicker = true;
    },
    //删除
    deteleAction(index) {
      let arr = this.details;
      arr.splice(index, 1);
      this.details = arr;
    },
    //向前添加一天
    addFront() {
      if (this.details.length >= 7) {
        Toast("只能添加7天");
        return;
      }
      if (this.details.length > 0) {
        if (this.details[0]["js_time"] && this.details[0]["js_time"] != "") {
          let dateTime = new Date(this.details[0]["js_time"]);
          let frontDay = new Date(dateTime.setDate(dateTime.getDate() + 1));
          let item = {
            applyId: 0,
            js_time: dateFormat(frontDay, "YY-mm-dd"),
            js_start_hour: "",
            js_km: 0,
            js_days: 0,
            js_address: "",
            js_hours: 0,
            js_bill_km: 0
          };
          this.details = [item].concat(this.details);
        }
      }
    },
    //向后添加一天
    addAfter() {
      if (this.details.length >= 7) {
        Toast("只能添加7天");
        return;
      }
      if (this.details.length > 0) {
        if (this.details[0]["js_time"] && this.details[0]["js_time"] != "") {
          let dateTime = new Date(this.details[0]["js_time"]);
          let frontDay = new Date(dateTime.setDate(dateTime.getDate() - 1));
          let item = {
            applyId: 0,
            js_time: dateFormat(frontDay, "YY-mm-dd"),
            js_start_hour: "",
            js_km: 0,
            js_days: 0,
            js_address: "",
            js_hours: 0,
            js_bill_km: 0
          };
          this.details = this.details.concat([item]);
        }
      }
    },
    getData() {
      this.$http
        .get("/orderRejoin/initDataForAppRejoin", {
          applyId: this.$route.query.id
        })
        .then(result => {
          console.log(result.data);
          this.apply = result.data.apply;
          this.details = result.data.details.map((item)=>{
              if(item.js_time!=""){
                  item.js_start_hour=item.js_start_hour.substring(0,2)+":"+item.js_start_hour.substring(2,4)
              }
              return item
          });
          this.conf = result.data.conf;
          //   this.price=result.data.price
        });
    }
  },
  components: {
    Header: Header
  }
};
</script>

<style scoped>
.container {
  padding: 20px 20px 140px 20px;
}

.title-icon {
  height: 36px;
  width: 36px;
  background-image: url("../Details/images/cart@3x.png");
}

.cost-car {
  height: 36px;
  width: 36px;
  background-image: url("../Details/images/cost.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-reduce {
  height: 30px;
  width: 30px;
  background-image: url("../Details/images/reduce.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 16px;
}

.car-plus {
  height: 30px;
  width: 30px;
  background-image: url("../Details/images/plus.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 20px;
}

.send-car {
  height: 36px;
  width: 36px;
  background-image: url("../Details/images/send-car@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-delete {
  height: 32px;
  width: 24px;
  background-image: url("../Details/images/delete.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.other-car {
  height: 36px;
  width: 36px;
  background-image: url("../Details/images/other.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.content-box {
  padding: 10px;
  background-color: #ffffff;
  margin-top: 10px;
  box-shadow: 0px 3px 5px 0px rgba(120, 120, 120, 0.1);
  border-radius: 6px;
  font-size: 30px;
}

.cb-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 26px;
  height: 93px;
  padding: 0 20px;
  border-bottom-color: #f2f2f2;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.cb-item-row {
  justify-content: space-between;
}

.cb-title {
  color: #333333;
  font-size: 30px;
}

.tittle-text {
  color: #333333;
  font-size: 30px;
}

.car-users-img {
  height: 28px;
  width: 22px;
  background-image: url("../Details/images/phone@2x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-users,
.module {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module {
  padding: 12px 0;
}
.add-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30px;
  color: #3c6dd1;
  justify-content: space-between;
  padding: 30px 5px;
}
.color-blue {
  color: #3c6dd1;
  padding-left: 13px;
  font-size: 24px;
}

.car-left50 {
  padding-left: 50px;
}

.start-img {
  height: 48px;
  width: 36px;
  background-image: url("../Details/images/start@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.end-img {
  height: 48px;
  width: 36px;
  background-image: url("../Details/images/end@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-left14 {
  padding-left: 14px;
}

.car-right25 {
  padding-right: 25px;
}

.color-green {
  color: #31b897;
}

.car-num {
  font-size: 20px;
  margin-right: 16px;
}

.car-message {
  color: #4168ca;
  font-size: 30px;
  letter-spacing: 3px;
}

.car-num-fee {
  /* color: #d84847; */
  font-size: 26px;
  border: none;
  border-bottom: 1px solid #333333;
  display: inline-block;
  padding: 15px 0;
  text-align: center;
  width: 150px;
}
.car-num-text {
  width: 350px;
}

.fee {
  font-size: 18px;
}
.buttom {
  padding: 0 60px;
  height: 140px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  z-index: 999;
}

.label-class {
  flex: 0.5;
}
</style>
